<template>
  <n-card :bordered="false" class="proCard">
    <BasicForm @register="register" :showAdvancedButton="false" @submit="handleSubmit"
               :show-reset-button="false">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]"/>
      </template>
    </BasicForm>
    <BasicTable :columns="columnsRef" :request="loadDataTable" ref="actionRef"
                :row-key="(row) => row.id"
                @update:check-row-keys="onCheckedRow" :pagination="paginationReactive"
                :theme-overrides="tableTheme"
                :scroll-x="1800" striped virtual-scroll>
      <!--      :max-height="250"-->
      <!--      :actionColumn="actionColumn"-->


      <template #toolbar>
        <n-button type="primary" @click="reloadTable">刷新数据</n-button>
      </template>
    </BasicTable>
  </n-card>
</template>

<script lang="ts" setup>

import {DataTableProps, useMessage} from 'naive-ui';
import {onMounted, reactive, ref} from 'vue'
import {useRouter} from 'vue-router';
import {getProjectList, getRegionList} from "@/api/statistics/stastistics";
import {QueryParamsStore} from '@/store/modules/queryParamsCache'
import {BasicTable} from '@/components/Table';
import {BasicForm, FormSchema, useForm} from '@/components/Form/index';
import {SelectBaseOption} from "naive-ui/es/select/src/interface";
// import {SelectBaseOption} from 'naive-ui/lib/select/src/interface';

const router = useRouter();
const message = useMessage();
const actionRef = ref();
const queryParamsStore = QueryParamsStore();

const queryParams = ref(queryParamsStore.getSheetParams)

const columnsRef = ref([]);

type DataTableThemeOverrides = NonNullable<DataTableProps['themeOverrides']>

const tableTheme:DataTableThemeOverrides = {
  thColor:"#F79646FF",
  thFontWeight:"bold"
}

const schemas = ref<FormSchema[]>([
  {
    field: 'project',
    labelMessage: '项目名称',
    component: 'NSelect',
    label: '项目',
    defaultValue: queryParams.value.project,
    componentProps: {
      placeholder: '请选择项目',
      filterable: true,
      options: [],
      onUpdateValue: (e: any) => {
        queryParams.value.project = e;
      },
    },
  },
  {
    field: 'region',
    component: 'NSelect',
    label: '区域',
    labelMessage: '国家地区',
    defaultValue: queryParams.value.region,
    componentProps: {
      placeholder: '请选择区域',
      filterable: true,
      options: [],
      onUpdateValue: (e: any) => {
        queryParams.value.region = e;
      },
    },
  },
  {
    field: 'dateType',
    component: 'NSelect',
    label: '日期类型',
    labelMessage: '查询日期类型',
    defaultValue: queryParams.value.dateType,
    componentProps: {
      placeholder: '请选择日期类型',
      options: [
        {
          label: '日期',
          value: 'daterange',
        },
        {
          label: '月份',
          value: 'monthrange',
        },
        {
          label: '季度',
          value: 'quarterrange',
        },
        {
          label: '年份',
          value: 'yearrange',
        },
      ],
      onUpdateValue: (value: string, option: SelectBaseOption) => {
        if (value != undefined) {
          queryParams.value.dateType = value;
          queryParams.value.dateTypeLabel = option.label;
          schemas.value[3].label = `${queryParams.value.dateTypeLabel}范围`;
          schemas.value[3].componentProps!['type'] = queryParams.value.dateType;

        }
      },
    },
  },
  {
    field: 'dateRange',
    component: 'NDatePicker',
    label: `${queryParams.value.dateTypeLabel}范围`,
    componentProps: {
      placeholder: `请选择${queryParams.value.dateTypeLabel}范围`,
      type: queryParams.value.dateType,
      clearable: true,
      onUpdateValue: (e: any, formattedValue: string) => {
        console.log(formattedValue);
        if (formattedValue) {
          queryParams.value.begin = formattedValue[0];
          queryParams.value.end = formattedValue[1];
        } else {
          queryParams.value.begin = null;
          queryParams.value.end = null;
        }
      },
    },
  }
]);

const [register, {}] = useForm({
  gridProps: {
    xGap: "5",
    yGap: "8",
    cols: '4 m:2 xl:4',
    // cols: '4'
  },
  inline: true,
  isFull: false,
  labelWidth: 90,
  labelPlacement: 'top',
  schemas,
});

onMounted(async () => {
  const regionList = await getRegionList({});
  const projectList = await getProjectList();

  const regions = [] as any;
  regionList.forEach((e: any) => {
    if (e['id'] != -1) {
      regions.push({label: e['title'], value: e['id']});
    }
  });
  schemas.value[1].componentProps!['options'] = regions;


  const projects = [] as any;
  projectList.forEach((e: any) => {
    projects.push({label: e['name'], value: e['id']});
  });
  schemas.value[0].componentProps!['options'] = projects;
});

const loadDataTable = async (res: any) => {
  const {
    columns,
    page,
    pageSize,
    pageCount,
    list
  } = await queryParamsStore.queryStatistics({...queryParams.value, ...res});
  actionRef.value.tableAction.setColumns(columns);
  paginationReactive.pageSize = pageSize;
  paginationReactive.page = page;
  paginationReactive.pageCount = pageCount;

  schemas.value[0].defaultValue = queryParams.value.project;
  return {list, page, pageSize, pageCount};
};


const paginationReactive = reactive({
  page: 1,
  pageSize: 10,
  pageCount: 1,
  showSizePicker: true,
  pageSizes: [10, 20, 50, 100],
  onChange: (page: number) => {
    paginationReactive.page = page
  },
  onUpdatePageSize: (pageSize: number) => {
    paginationReactive.pageSize = pageSize
    paginationReactive.page = 1
  }
})

function onCheckedRow(rowKeys) {
  console.log(rowKeys);
}

function reloadTable() {
  actionRef.value.reload();
}

function handleSubmit() {
  paginationReactive.page = 1;
  actionRef.value.page = 1;
  queryParams.value['page'] = 1;
  actionRef.value.updatePage(1);
  reloadTable();
}

/*function handleReset() {
  queryParamsStore.clearSheetData();
  queryParams.value = Object.assign(unref(queryParams.value),  queryParamsStore.getSheetParams);
}*/
</script>

<style lang="less" scoped>
.page-container {
  width: 100%;
  border-radius: 4px;
  padding: 50px 0;
  height: 100vh;

  .text-center {
    h1 {
      color: #666;
      padding: 20px 0;
    }
  }

  img {
    width: 350px;
    margin: 0 auto;
  }
}

</style>
